<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image>
		<image class="img-b" src="https://zhoukaiwen.com/img/loginImg/3.png"></image>
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view>
		<view class="t-b2">滴滴司机账号登录界面</view>
		<form class="cl">
			<view class="t-a">
				<image src="https://zhoukaiwen.com/img/loginImg/sj.png"></image>
				<view class="line"></view>
				<input type="text" name="acc" placeholder="账号" v-model="acc" class="input-box" />
			</view>
			<view class="t-a">
				<image src="https://zhoukaiwen.com/img/loginImg/sj.png"></image>
				<view class="line"></view>
				<input type="password" name="pwd" placeholder="密码" v-model="pwd" class="input-box" />
			</view>
			<view class="verification-row">
				<view class="verification-input">
					<image src="https://zhoukaiwen.com/img/loginImg/yz.png"></image>
					<view class="line"></view>
					<input type="text" name="code" maxlength="4" placeholder="请输入验证码" v-model="code" class="code-input" />
				</view>
				<view class="code-img" @click.stop="getCode">
					<img :src="url" alt="验证码" />
				</view>
			</view>
			<button @click="gologin">登 录</button>
		</form>
		<view class="t-f"><text>————— 手机号登录 —————</text></view>
		<view class="t-e cl">
			<text class="t-acc" @tap="goPhonePage">手机号登录</text>
		</view>
		<view class="t-e cl">
			<text class="t-acc" @tap="goReg">没有账号，去注册</text>
		</view>
	</view>
</template>
<script>
	import { login ,getCode} from '@/request/api.js'
export default {
	data() {
		return {
			title: '滴滴出行', //填写logo或者app名称，也可以用：欢迎回来，看您需求
			acc: '', //手机号码
			pwd: '',
			code: '' ,//验证码
			url:'',
			requestId:''
		};
	},
	onLoad() {
		
	},
	mounted() {
	    this.getCode();
	},
	methods: {
		//当前登录按钮操作
		gologin() {
			var that = this;
			if (!that.acc) {
				uni.showToast({ title: '请输入账号', icon: 'none' });
				return;
			}
			if (!that.pwd) {
				uni.showToast({ title: '请输入密码', icon: 'none' });
				return;
			}
			if (!that.code) {
				uni.showToast({ title: '请输入验证码', icon: 'none' });
				return;
			}
			let user={
				acc:that.acc,
				pwd:that.pwd,
				code:that.code,
				key:this.requestId,
			}
			console.log(user,2222222222222)
			login(user).then(res=>{
			   console.log(res); 
			   if(res.message == "验证码过期或有误！"){
				   uni.showToast({ title: '验证码过期或有误！', icon: 'none' });
				   return;	
			   }
			   if(res.message == "账号或密码有误！"){
				   uni.showToast({ title: '账号或密码有误！', icon: 'none' });
				   return;
			   }
			   
			   if(res.message == "success"){
				    // 使用 uni-app 的同步存储 API 替代 sessionStorage
                	uni.setStorageSync("token", res.data.token);
                	//将用户消息全部存进uni-app的本地缓存中
                	uni.setStorageSync("userInfo", res.data.driver);
				    uni.showToast({ title: '登录成功！', icon: 'none' });
				    uni.switchTab({
				       url: '/pages/firstPage/firstPage' // 替换为你的目标页面路径
				    });
			   }
			})
			//....此处省略，这里需要调用后台验证一下验证码是否正确，根据您的需求来
			
		},
		//获取短信验证码
		async getCode() {
		    try {
				// 显示加载提示
				uni.showLoading({
					title: '获取验证码中...',
					mask: true
				});
				// 生成一个唯一的 key（例如使用 UUID，这里简单使用 Date.now() 和随机数）
				this.requestId = 'req_' + Date.now() + '_' + Math.floor(Math.random() * 1000);
				const res = await getCode(this.requestId);
				if (res.message === "success") {
					this.url = "data:image/png;base64," + res.data; // 确保从 res.data 中获取 code	
				} else {
					uni.showToast({ title: '验证码获取失败！', icon: 'none' });
				}
			} catch (error) {
				console.error('获取验证码出错:', error);
				uni.showToast({ title: '获取验证码失败，请稍后重试', icon: 'none' });
			} finally {
				// 隐藏加载提示
				uni.hideLoading();
			}
		   
		},
		goPhonePage(){
			uni.navigateTo({
			    url: '/pages/index/index' // 替换为你的目标页面路径
			});
		},
		goReg(){
			uni.navigateTo({
			    url: '/pages/reg/reg' // 替换为你的目标页面路径
			});
		}
	}
}
</script>
<style>
.img-a {
	position: absolute;
	width: 100%;
	top: -180rpx;
	right: 0;
}
.img-b {
	position: absolute;
	width: 50%;
	bottom: 0;
	left: -200rpx;
}
.t-b2 button{
	font-size: 10rpx;
	height: 30px;
}
.t-login {
	width: 650rpx;
	margin: 0 auto;
	font-size: 28rpx;
	color: #000;
}

.t-login button {
	font-size: 28rpx;
	background: #5677fc;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	margin-top: 20rpx;
}

.t-login input {
	padding: 0 20rpx 0 120rpx;
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 30rpx;
	background: #f8f7fc;
	border: 1px solid #e9e9e9;
	font-size: 28rpx;
	border-radius: 50rpx;
}

.t-login .t-a {
	position: relative;
	margin-bottom: 30rpx;
}

.t-login .t-a image {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	left: 40rpx;
	top: 28rpx;
	z-index: 2;
}

.t-login .t-a .line {
	width: 2rpx;
	height: 40rpx;
	background-color: #dedede;
	position: absolute;
	top: 28rpx;
	left: 98rpx;
	z-index: 2;
}

.input-box {
	padding: 0 20rpx 0 120rpx;
	height: 90rpx;
	line-height: 90rpx;
	background: #f8f7fc;
	border: 1px solid #e9e9e9;
	font-size: 28rpx;
	border-radius: 50rpx;
	width: 100%;
	box-sizing: border-box;
}

/* 验证码行样式 */
.verification-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	width: 100%;
	height: 90rpx;
}

.verification-input {
	position: relative;
	width: 60%;
	margin-right: 20rpx;
	height: 90rpx;
}

.verification-input image {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	left: 40rpx;
	top: 28rpx;
	z-index: 2;
}

.verification-input .line {
	width: 2rpx;
	height: 40rpx;
	background-color: #dedede;
	position: absolute;
	top: 28rpx;
	left: 98rpx;
	z-index: 2;
}

.code-input {
	padding: 0 20rpx 0 120rpx;
	height: 90rpx;
	line-height: 90rpx;
	background: #f8f7fc;
	border: 1px solid #e9e9e9;
	font-size: 28rpx;
	border-radius: 50rpx;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 0;
}

/* 验证码图片容器 */
.code-img {
	width: 35%;
	height: 90rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f8f7fc;
	border: 1px solid #e9e9e9;
	border-radius: 10rpx;
	overflow: hidden;
	cursor: pointer;
	box-sizing: border-box;
}

/* 验证码图片 */
.code-img img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.t-login .t-b {
	text-align: left;
	font-size: 46rpx;
	color: #000;
	padding: 240rpx 0 20rpx 0;
	font-weight: bold;
}
.t-login .t-b2 {
	text-align: left;
	font-size: 32rpx;
	color: #aaaaaa;
	padding: 0rpx 0 80rpx 0;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 60rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 50rpx auto 0;
}

.t-login .t-g {
	float: left;
	width: 50%;
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 70rpx 0 0 0;
	color: #666;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #000;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}
.t-acc{
	color: #1B6EF3;
}
</style>
